<template>
  <div id="myChart" :style="{width: '800px', height: '600px'}"></div>
</template>

<script>

import{
  article_viewcount
}from '@/api/chart/bar'

export default {
  name: 'Echarts',
  mounted(){

    article_viewcount(this.queryParams).then((response) => {
      console.log(response)

      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '文章浏览量',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#555555'
          }
        },
        tooltip: {},
        xAxis: {
          data: response.names
        },
        yAxis: {},
        series: [{
          name: '浏览量',
          type: 'bar',
          data: response.values
        }]
      });
    })

  }
}
</script>
